<template>
  <div class="shop_index">
    <header class="bgfff flex-row box-sizing">
      <div class="user_info flex-col box1 flex-middle">
        <div class="img-bg user-img box-center" :style="{backgroundImage:`url(${userInfo.wximpurl})`}">
          <!-- <i class="iconfont icon-yonghu font-22"></i> -->
          <!-- <img :src="" alt=""> -->
        </div>
        <div class="font-16 padding-l15 flex-col">
          {{userInfo.username }}
          <div class="font-12 c82 padding-l10">
            <i class="iconfont icon-shouji"></i>
            {{userInfo.user_level | userRank}}
          </div>
        </div>
      </div>
      <div class="box1 flex-col flex-middle">
        <div class="box1">
          <img :src="integralImg" class="imgfont" alt="">
          <!-- <i class="iconfont icon-shouji"></i> -->
          <span class="cred">积分</span>
          <span>{{userInfo.integral}}</span>
        </div>
        <span class="tag" @click="toRouter('shop_rule')">积分规则</span>
        <span class="tag" @click="toRouter('exchange_record')">兑换记录</span>
      </div>
    </header>
    <main>
      <div class="swiper">
        <div class="full img-bg bor-r" :style="{backgroundImage:`url(http://img0.imgtn.bdimg.com/it/u=615971456,545574052&fm=27&gp=0.jpg)`}"></div>
      </div>
      <div class="shop_box">
        <div class="shop-tit">我可以兑换的</div>
        <ul class="shop_list flex-parent">
          <li class="shop_it" v-for="it in myshop" :key="it.commodityCode" @click="toRouter('commodity_info/'+it.commodityCode)">
            <div class="shop_info padding-10 box-sizing bor-r bgfff">
              <div class="shop_img position-r">
                <div class="img-bg" :style="{backgroundImage:`url(${it.imgurl})`}"></div>
                <p class="padding-t5">{{it.commodityName}}</p>
                <span class="tag dis-ib position-a cfff bor-r font-12 box-center">优惠</span>
              </div>
              <div class="shop_num border-t">
                <span class="cred">{{it.commodityPrice}}</span>
                <span class="c82 margin-l5">积分</span>
                <span class="tag dis-ib bgred cfff" :class="{active:!it.stock}">{{it.stock | stock}}</span>
              </div>
            </div>
          </li>
        </ul>
        <div class="padding-lr15">精品专区</div>
        <ul class="shop_list flex-parent">
          <li class="shop_it" v-for="it in shopList" :key="it.commodityCode" @click="toRouter('commodity_info/'+it.commodityCode)">
            <div class="shop_info padding-10 box-sizing bor-r bgfff">
              <div class="shop_img position-r">
                <div class="img-bg" :style="{backgroundImage:`url(${it.imgurl})`}"></div>
                <p class="padding-t5">{{it.commodityName}}</p>
                <span class="tag dis-ib position-a cfff bor-r font-12 box-center">优惠</span>
              </div>
              <div class="shop_num border-t">
                <span class="cred">{{it.commodityPrice}}</span>
                <span class="c82 margin-l5">积分</span>
                <span class="tag dis-ib bgred cfff" :class="{active:!it.stock}">{{it.stock | stock}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </main>
    <v-header></v-header>
  </div>
</template>

<script>
import header from "../../components/index_nav";
export default {
  name: "shop_index",
  data() {
    return {
      integralImg: require("../../image/integral.png"),
      myshop: [], // 我可以兑换的
      shopList: [], // 精品列表
      userInfo: {},
    };
  },
  activated() {
    if (this.$store.state.commonStore.exchange_ok) {
      let that = this;
      this.http.all(
        [
          that.updateUserInfo(),
          that.shopView() // 更新我能兑换的
        ],
        () => {
          that.userInfo = that.getCache("userInfo");
        }
      );
    }
  },
  created() {
    this.$store.commit("index_nav", 1);
  },
  components: {
    "v-header": header
  },
  //read
  mounted: function() {
    //保证vue初始化完成
    let that = this;
    this.$nextTick(function() {
      that.userInfo = that.getCache("userInfo");
      that.shopView();
      that.shopListView();
    });
  },
  filters: {
    stock(num) {
      return num ? "兑换" : "兑完";
    }
  },
  methods: {
    shopView() {
      let that = this;
      this.http
        .get("commodity/list", {
          page: 1,
          limit: 4,
          myCommodity: 0
        })
        .then(res => {
          that.myshop = res.data.list;
          this.$store.commit("exchange_ok", false);
          // console.log(JSON.stringify(res));
        })
        .catch(err => {});
    },
    shopListView() {
      let that = this;
      this.http
        .get("commodity/list", {
          page: 1,
          limit: 4,
          myCommodity: 1
        })
        .then(res => {
          that.shopList = res.data.list;
          // console.log('==='+JSON.stringify(res));
        })
        .catch(err => {});
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../css/list.scss";
.shop_index {
  padding-bottom: 0.5rem;
}
header {
  padding: 0.1rem 0.15rem;
  height: 1.14rem;
  .user-img {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 0.4rem;
  }
  .tag {
    display: inline-block;
    width: 0.85rem;
    height: 0.3rem;
    text-align: center;
    line-height: 0.3rem;
    margin-left: 0.15rem;
    border-radius: 0.3rem;
    background: #e4e8e9;
    color: #797d80;
  }
}
main {
  .swiper {
    height: 1.42rem;
    padding: 0.2rem 0.15rem 0;
  }
}
</style>
